<template>
  <div class="container">
    <el-row :gutter="20" class="marginBottom">
      <el-col :span="24">
        <el-button type="primary" @click="addshopHandle">添加店铺</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          class="marginBottom"
        >
          <el-table-column prop="shop_name" label="店铺名称">
          </el-table-column>
          <el-table-column prop="address" label="店铺地址"> </el-table-column>
          <el-table-column prop="phone" label="联系方式"> </el-table-column>
          <el-table-column prop="school_name" label="所属学校"> </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
           <el-table-column prop="username" label="店主账户">
          </el-table-column>
           <el-table-column prop="password" label="店主密码">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="添加店铺"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="shopInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="店铺名称" prop="shop_name">
          <el-input
            placeholder="请输入店铺名称"
            v-model="shopInfo.shop_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address">
          <el-input
            placeholder="请输入店铺地址"
            v-model="shopInfo.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            placeholder="请输入联系方式"
            v-model="shopInfo.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录账户" prop="username">
          <el-input
            placeholder="请输入登录账户"
            v-model="shopInfo.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            placeholder="请输入登录密码"
            v-model="shopInfo.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择学校" prop="school_id">
          <el-select
            v-model="shopInfo.school_id"
            placeholder="请选择选择学校"
            clearable
          >
            <el-option
              v-for="item in school"
              :label="item.school_name"
              :value="item.school_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="submitState" @click="handleClose"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitshop">
          {{ submitState ? "提交中..." : "确定" }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getShopList, deleteShop, addShop } from "@/api/shop/index";
import { getSchoolList } from "@/api/school/index";

export default {
  name: "shop",
  data() {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
      dialogVisible: false,
      shopInfo: {
        shop_name: "",
        address: "",
        phone:'',
        username:'',
        password:'',
        school_id:''
      },
      school: [],
      submitState: false,
      rules: {
        shop_name: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        school_id: [
          { required: true, message: "请选择店铺所属学校", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入店铺联系方式", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入登录名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getData() {
      this.loading = true;
      getShopList(this.queryParams)
        .then((result) => {
          const { total, data } = result;
          this.tableData = data;
          this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.total = 0;
          this.loading = false;
        });
      getSchoolList()
        .then((result) => {
          this.school = result.data;
        })
        .catch((err) => {
          this.school = [];
        });
    },
    handleDelete(index, row) {
      deleteShop(row.shop_id)
        .then((result) => {
          const { msg, status } = result;
          if (status == "success") {
            this.$message({
              message: "删除店铺成功!",
              type: "success",
            });
          } else {
            this.$message.error(msg);
          }
          this.getData();
        })
        .catch(() => {
          this.$message.error("删除店铺失败!");
        });
    },
    clearInfo() {
      for (let item in this.shopInfo) {
        this.shopInfo[item] = "";
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.clearInfo();
    },
    addshopHandle() {
      this.dialogVisible = true;
    },
    submitshop() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitState = true;
          addShop(this.shopInfo)
            .then((result) => {
              if (result.status == "success") {
                this.$message({
                  message: "添加店铺成功",
                  type: "success",
                });
              } else {
                this.$message.error(result.msg);
              }
              this.getData();
              this.submitState = false;
              this.handleClose();
            
            })
            .catch(() => {
              this.$message.error("添加店铺失败!");
              this.submitState = false;
              this.handleClose();
            });
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss"></style>
